

<template>
  <div class="app-container">
<v-GetToolBar :MenuCode=MenuCode></v-GetToolBar>

    <div id="divSearch" ref="divSearch">
      <el-form :inline="true" :model="Search" size="mini" class="demo-form-inline">
        <el-form-item label="日期" prop="Search">

          <el-date-picker v-model="Search.CreatedOn"
                          type="daterange"
                          start-placeholder="开始日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          end-placeholder="结束日期"
                          :default-time="['00:00:00', '00:00:00']" />

        </el-form-item>
        <el-form-item label="编号" prop="Search">

          <el-input v-model.trim="Search.ServerCode" placeholder="编号" />




        </el-form-item>
      
      </el-form>
    </div>

    <el-table :data="DataList" :height="tableHeight" style="width: 100%;margin-top: 0px;" border @sort-change="sortChange">
  <el-table-column  label="序号" type="index" width="50" align="center">
           
          </el-table-column>
      <el-table-column align="center" label="编号" width="120px">
        <template slot-scope="scope">
          {{ scope.row.RecommendCostNo }}
        </template>
      </el-table-column>

      <el-table-column prop="StartDate" align="center" width="100"   label="开始日期"  :formatter="formatDate">
        

      </el-table-column>

      <el-table-column prop="EndDate" align="center" width="100" label="结束日期" :formatter="formatDate">
   

     

      </el-table-column>


      <!-- <el-table-column align="center" label="开放单位">
        <template slot-scope="scope">
          {{ scope.row.Organizename }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="职位">
        <template slot-scope="scope">
          {{ scope.row.JobName }}
        </template>
      </el-table-column> -->



     

      <el-table-column align="center" label="年龄范围起止" width="50px">

        <template slot-scope="scope">
          {{ scope.row.Startage }}
        </template>
      </el-table-column>



      <el-table-column align="center" label="年龄范围截止" width="50px">

        <template slot-scope="scope">
          {{ scope.row.Endage }}
        </template>
      </el-table-column>


      <el-table-column align="center" width="60" label="自离期限">


        <template slot-scope="scope">
          {{ scope.row.SelfSeparation }}
        </template>
      </el-table-column>



      <el-table-column align="center" label="离职期限" width="50px">

        <template slot-scope="scope">
          {{ scope.row.Qit }}
        </template>
      </el-table-column>


      <el-table-column align="center" width="60" label="可推荐次数">

        <template slot-scope="scope">
          {{ scope.row.RecommendedTimes }}
        </template>
      </el-table-column>



      <el-table-column align="center" width="60" label="推荐费总金额">

        <template slot-scope="scope">
          {{ scope.row.Cost }}
        </template>
      </el-table-column>





      <el-table-column align="header-center" width="70" label="创建人">


        <template slot-scope="scope">
          {{ scope.row.CreatedByName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.CreatedOn }}
        </template>
      </el-table-column>

      <el-table-column align="header-center" width="70" label="修改人">


        <template slot-scope="scope">
          {{ scope.row.ModifiedByName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="修改时间">
        <template slot-scope="scope">
          {{ scope.row.ModifyedOn }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" width="120" label="操作">
        <template slot-scope="scope">
          	<el-button type="primary" icon="el-icon-edit" size="mini" v-if="IsfunEdit==true"  @click="handleEdit(scope)" circle></el-button>
				   <el-button type="danger" icon="el-icon-delete" size="mini" v-if="IsfunDelete==true" @click="handleDelete(scope)"  circle></el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="sizes, prev, pager, next,total"
                   :page-size="Search.pageSize"
                   :total="Search.total"
                   @current-change="pageChange" />



    <el-dialog  v-if="dialogVisible" :visible.sync="dialogVisible" width="1000px" top="20px">


    <el-form :model="name" label-width="80px" label-position="left">
        <v-RecommendCostSetForm :inputName='inputName'></v-RecommendCostSetForm>
      </el-form>

     



    </el-dialog>
  </div>




</template>

<script>
  import path from 'path'
  import { deepClone } from '@/utils'
  import { getDataList, updateForm, DeleteForm } from '@/api/RecommendCostSetList'
  import vRecommendCostSetForm from './RecommendCostSetForm'
  import vGetToolBar from "../Common/GetToolBar";
  // 默认的编辑字段
  const defaultObject = {

  }


  export default {
     name: "RecommendCostSetList1",
  components: {
  vRecommendCostSetForm,
   vGetToolBar
  },

    data() {
      return {
        tableHeight:null,
          tableHeight1: 400,
        EditObj: [],
        IsfunEdit:false,
        IsfunDelete:false,
        MenuCode:"A790501",
        DataListCost: [],
        DataList: [],//队列的列表 在el-table中用
        dialogVisible: false,
        Search: {// 查询条件
          total: 0, // 总记录数
          pageSize: 10, // 一页显示的记录数
          page: 1, // /当前页码
          RNO: '001', // 表编号  根据Controller中对应的表编号
          jsWhere: ''// 自定义条件
        }
      }
    },
    computed: {
      routesData() {
        return this.routes
      }
    },
    created() {
      // Mock: get all routes and roles list from server

      this.getDataList()
    },
    mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 220 + "px";
    });
  },
    methods: {
      pageChange(page) { // 翻页
        this.Search.page = page

        this.getDataList()
      },
      async getDataList() { // 获取列表数据，通用
        const res = await getDataList({ data: JSON.stringify(this.Search) })
        res.data.Table.forEach((m) => {
        if (m.StartDate != null) {
          m.StartDate = m.StartDate.substring(0, 10);
        }
        if (m.EndDate != null) {
          m.EndDate = m.EndDate.substring(0, 10);
        }
      });
        this.DataList = res.data.Table //将data 中的数据放到DataList中
        this.Search.total = res.data.Table1[0].RecordCount
       
      },
      sortChange: function (column) {
        // column, prop, order,排序，通用
        
        this.Search.sort = column.prop + ' ' + column.order

        this.getDataList()
      },
      formatDate(row, column) {
    // 获取单元格数据
     
    let data = row[column.property]
    if (data==null) {
        return ''
    }
    let dt = new Date(data)
    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() 
},
      handeAdd() { // 新建

       
        
        this.inputName ="";
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedNodes([])
        }
        this.dialogType = 'new'
        this.dialogVisible = true
        this.getDataList();
      },
      handleEdit(scope) { // 修改

       this.inputName = scope.row.RecommendCostNo;



        this.dialogType = 'edit'
        this.dialogVisible = true
        this.checkStrictly = true
      
        this.$nextTick(() => {
          const routes = this.generateRoutes(this.EditObj.routes)
          this.$refs.tree.setCheckedNodes(this.generateArr(routes))
          // set checked state of a node not affects its father and child nodes
          this.checkStrictly = false

        })
        this.getDataList();

      },
      async handleDelete({ $index, row }) {
        this.$confirm('确定删除该记录吗?', '警告', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await DeleteForm({ billID: row.RecommendCostNo })
            this.DataList.splice($index, 1)
            if (result.code === 20000) {
              this.dialogVisible = false
              this.$notify({
                title: 'Success',
                dangerouslyUseHTMLString: true,
                message: result.message,
                type: 'success'
              })
            } else {
              this.$notify({
                title: 'error',
                dangerouslyUseHTMLString: true,
                message: result.message,
                type: 'error'
              })
            }

          })

      }
    

    }
  }
  </script>

<style lang="scss" scoped>
 .app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }

  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
  .el-table {
    // display: table-cell!important;
    text-align: center;
  }
}

.customWidth {
  width: 80%;
  height: 860px;
}
</style>
